<!--
 * @Author: 王成杰
 * @Description: 二期股池订阅方式组件
 -->
<template>
  <div>
    <section class="unAuthorized" v-show="isShow">
      <div class="dia_bg">
        <p>提示：您可任选一种或两种提示方式，但由于运营或技术因素，可能存在延迟</p>
        <div v-for="(item, index) in selectList" :key="index">
          <div class="check_box_wrapper">
            <div class="label_wrapper" @click="subscribe(index, item.isSelect, item.sourceType)">
              <label>{{ item.name }}</label>
              <label :class="{ correct: item.isSelect }"></label>
            </div>
          </div>
        </div>
      </div>
    </section>
    <div class="mask" v-show="isShow" @click="addSubscribe()"></div>
  </div>
</template>

<script>
// 订阅状态查询和设置
import {
  GET_SUB,
  SET_SUB,
  GET_QUERY_SUBSCRIBE,
  POST_INSERT_SUBSCRIBE,
  GET_MODEL_THREE_QUERY,
  GET_MODEL_THREE_SET,
  GET_MODEL_VALUE_QUERY,
  GET_MODEL_VALUE_SET,
} from '@/apis';
import { stopBodyScroll } from '@/utils/index';
const ybyxGpcId=118;
export default {
  name: 'SubscribeTemplate',
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
    gpcId: {
      type: String,
      default: '',
    },
    infoIndex: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      sub: false,
      selectList: [
        { id: 1, name: '电脑弹窗', isSelect: false, sourceType: 1 },
        { id: 3, name: '手机客户端消息', isSelect: false, sourceType: 2 },
        { id: 4, name: '手机短信消息', isSelect: false, sourceType: 2 },
      ],
      setGray: false, //订阅状态
      subArr: [],
      subLock: false, //设置订阅状态请求锁
      largeNumber: false,
      // isModeOne/isModelTwo/isModelThree/isModelFour/isModelFive修改后，watch监听gpcId的函数内也要同步修改
      isModelOne: [2, 78, 202].includes(Number(this.gpcId)), // 细分龙头 高管增持 多头趋势 
      isModelTwo: [2072].includes(Number(this.gpcId)), // 强龙低吸
      isModelThree: [11, 4, 6].includes(Number(this.gpcId)), // 热点轮动 生一度IV 小盘成长
      isModelFour: [734].includes(Number(this.gpcId)), // 价值成长
      isModelFive: [ybyxGpcId].includes(Number(this.gpcId)), // AI研报优选
      strArr: [],
      queryId: '',
    };
  },
  watch: {
    gpcId: {
      handler(newValue) {
        this.queryId = newValue;
        const ggzcId=2;
        const oldXfltId=78;
        const newXfltId=178;
        const newRdldId=186;
        const dtqsId=202;
        const xfjjId=218;
        const bdqxId=220;
        const rdjjId=222;
        const ncId=212;
        if ([ggzcId, oldXfltId,newXfltId,newRdldId,dtqsId,xfjjId,bdqxId,rdjjId,ncId].includes(Number(newValue))) {
          this.isModelOne = true;
          this.isModelTwo = false;
          this.isModelThree = false;
          this.isModelFour = false;
          this.isModelFive = false;
          return;
        }
        if ([2072].includes(Number(newValue))) {
          this.isModelOne = false;
          this.isModelTwo = true;
          this.isModelThree = false;
          this.isModelFour = false;
          this.isModelFive = false;
          return;
        }
        if ([11, 4, 6].includes(Number(newValue))) {
          this.isModelOne = false;
          this.isModelTwo = false;
          this.isModelThree = true;
          this.isModelFour = false;
          this.isModelFive = false;
          return;
        }
        if ([734].includes(Number(newValue))) {
          this.isModelOne = false;
          this.isModelTwo = false;
          this.isModelThree = false;
          this.isModelFour = true;
          this.isModelFive = false;
          return;
        }
        if ([ybyxGpcId].includes(Number(newValue))) {
          this.isModelOne = false;
          this.isModelTwo = false;
          this.isModelThree = false;
          this.isModelFour = false;
          this.isModelFive = true;
          return;
        }
      },
    },
    isShow: {
      handler(newValue) {
        stopBodyScroll();
        this.subArr = [];
        this.selectList = [
          { id: 1, name: '电脑弹窗', isSelect: false, sourceType: 1 },
          { id: 3, name: '手机客户端消息', isSelect: false, sourceType: 2 },
          { id: 4, name: '手机短信消息', isSelect: false, sourceType: 2 },
        ];
        this.subscribeStatus();
      },
    },
  },
  mounted() {
    this.subscribeStatus();
  },
  methods: {
    //订阅弹窗
    addSubscribe() {
      this.$emit('changeStatus', {
        showStatus: !this.isShow,
        setGray: this.subArr.length ? true : false,
        setIndex: this.infoIndex,
      });
    },
    // 订阅功能
    subscribe(index, status, sourceType) {
      if (sourceType == 2) {
        //处理互斥情况
        if (index == 1) {
          this.selectList[1]['isSelect'] = !status;
          if (this.selectList[2]['isSelect']) {
            this.selectList[2]['isSelect'] = status;
          }
        } else {
          this.selectList[2]['isSelect'] = !status;
          if (this.selectList[1]['isSelect']) {
            this.selectList[1]['isSelect'] = status;
          }
        }
      } else {
        this.selectList[index]['isSelect'] = !status;
      }
      this.strArr = [];
      for (let ind = 0; ind < this.selectList.length; ind++) {
        const element = this.selectList[ind];
        if (element.isSelect) {
          this.strArr.push(element.id);
        }
      }
      const modelSubsetOptions = {
        1: this.modelOneSubSet,
        2: this.modelTwoSubSet,
        3: this.modelThreeSubSet,
        4: this.modelFourSubSet,
        5: this.modelOneSubSet,
      };
      const modelArr = [
        this.isModelOne,
        this.isModelTwo,
        this.isModelThree,
        this.isModelFour,
        this.isModelFive,
      ];
      const indexModel = modelArr.findIndex(item => item);
      if (modelSubsetOptions[indexModel + 1]) {
        modelSubsetOptions[indexModel + 1]();
      }
    },
    async modelOneSubSet() {
      const param = {
        pushtype: this.strArr.toString(),
        gpc: this.queryId,
        version: getParam('product') === 'jtzz' ? 2 : 1,
        type: 1,
      };
      const res = await SET_SUB(param);
      if (Number(res.code) === 0 && res.data) {
        this.setGray = true;
        this.subArr = this.strArr;
      } else if (res && Number(res.code) === -3) {
        this.largeNumber = true;
        this.$toast(res.data);
      }
    },
    //模板2   强龙低吸和多头趋势 股池订阅
    async modelTwoSubSet() {
      const param = {
        push_type: this.strArr.toString(),
        pool_id: this.queryId,
      };
      try {
        const res = await POST_INSERT_SUBSCRIBE(param);
        if (Number(res.errorcode) === 0 && res.result) {
          this.setGray = true;
          this.subArr = this.strArr;
        }
      } catch (error) {
        _t.errorReport({name:`SubscribeTemplate.vue组件中方法modelTwoSubSet错误。${error.name}`,message:`接口url：${_Global.api.insertSubscribe}，参数：${JSON.stringify(param)}。${error.message}`,stack:error.stack,category:'js'});
      }
    },
    // 模板3
    async modelThreeSubSet() {
      const param = {
        push_type: this.strArr.toString(),
        pool_id: this.queryId === 4 ? 2 : this.queryId,
      };
      try {
        const res = await GET_MODEL_THREE_SET(param);
        if (Number(res.errorcode) === 0 && res.result) {
          this.setGray = true;
          this.subArr = this.strArr;
        }
      } catch (error) {
        _t.errorReport({name:`SubscribeTemplate.vue组件中方法modelThreeSubSet错误。${error.name}`,message:`接口url：${_Global.api.modelThreeSubSet}，参数：${JSON.stringify(param)}。${error.message}`,stack:error.stack,category:'js'});
      }
    },
    // 模板4
    async modelFourSubSet() {
      const param = {
        push_type: this.strArr.toString(),
        pool_id: this.queryId,
      };
      try {
        const res = await GET_MODEL_VALUE_SET(param);
        if (Number(res.errorcode) === 0 && res.result) {
          this.setGray = true;
          this.subArr = this.strArr;
        }
      } catch (error) {
        _t.errorReport({name:`SubscribeTemplate.vue组件中方法modelFourSubSet错误。${error.name}`,message:`接口url：${_Global.api.modelValueSubSet}，参数：${JSON.stringify(param)}。${error.message}`,stack:error.stack,category:'js'});
      }
    },
   async modelSubGet(){
     let res=null;
    const modelSubGetOptions = {
        1: this.modelOneSubGet,
        2: this.modelTwoSubGet,
        3: this.modelThreeSubGet,
        4: this.modelFourSubGet,
        5: this.modelFiveSubGet,
      };
      const modelArr = [
        this.isModelOne,
        this.isModelTwo,
        this.isModelThree,
        this.isModelFour,
        this.isModelFive,
      ];
      const indexModel = modelArr.findIndex(item => item);
      if (modelSubGetOptions[indexModel + 1]) {
        res = await modelSubGetOptions[indexModel + 1]();
      }
      return res;
    },
    checkFn(pushStatusArr){
      this.selectList.forEach(item => {
        let typeId=null;
        // 模板1
         if (this.largeNumber) {
          typeId = this.isModelOne || this.isModelFive ? item.id.toString() : item.id;
          if (this.subArr.includes(typeId)) {
            item.isSelect = true;
          }
        } else {
          typeId = this.isModelOne || this.isModelFive ? item.id.toString() : item.id;
          if (pushStatusArr.includes(typeId)) {
            item.isSelect = true;
          }
        }
      });
    },
    //订阅状态查询
    async subscribeStatus() {
      const res=await this.modelSubGet();
      let pushStatusArr;
      this.subLock = false;
      pushStatusArr = res;
      if (!pushStatusArr) {
        return;
      }
      this.subArr = pushStatusArr;
      if (this.largeNumber) {
        this.selectList = [
          { id: 1, name: '电脑弹窗', isSelect: false, sourceType: 1 },
          { id: 3, name: '手机客户端消息', isSelect: false, sourceType: 2 },
          { id: 4, name: '手机短信消息', isSelect: false, sourceType: 2 },
        ];
      }
      this.checkFn(pushStatusArr);
    },
    // 模板1
    async modelOneSubGet() {
      const param = {
        type: 1, //订阅类型，1-股票池，2-股票，3-全部
        data: true,
        gpc: this.queryId,
        version: getParam('product') === 'jtzz' ? 2 : 1,
      };
      const res = await GET_SUB(param);
      if (res && Number(res.code) === 0 && res.data && res.data[0]) {
        this.largeNumber = true;
        return res.data[0].push_type;
      }
    },
    // 模板2
    async modelTwoSubGet() {
      const param = {
        pool_id: this.queryId,
      };
      try {
        const res = await GET_QUERY_SUBSCRIBE(param);
        if (res && Number(res.errorcode) === 0 && res.result && res.result.length) {
          let pushType = [];
          res.result.forEach((item, index) => {
            if (item.cate_key === this.queryId.toString()) {
              pushType.push(item.push_type);
            }
          });
          this.largeNumber = true;
          return pushType;
        }
      } catch (error) {
        _t.errorReport({name:`SubscribeTemplate.vue组件中方法modelTwoSubGet错误。${error.name}`,message:`接口url：${_Global.api.querySubscribe}，参数：${JSON.stringify(param)}。${error.message}`,stack:error.stack,category:'js'});
      }
    },
    // 模板3
    async modelThreeSubGet() {
      const param = {
        pool_id: this.queryId === 4 ? 2 : this.queryId,
      };
      try {
        const res = await GET_MODEL_THREE_QUERY(param);
        if (res && Number(res.errorcode) === 0 && res.result && res.result.length) {
          let pushType = [];
          res.result.forEach((item, index) => {
            pushType.push(item.push_type);
          });
          this.largeNumber = true;
          return pushType;
        }
      } catch (error) {
        _t.errorReport({name:`SubscribeTemplate.vue组件中方法modelThreeSubGet错误。${error.name}`,message:`接口url：${_Global.api.modelThreeSubQuery}，参数：${JSON.stringify(param)}。${error.message}`,stack:error.stack,category:'js'});
      }
    },
    async modelFourSubGet() {
      const param = {
        pool_id: this.queryId,
      };
      try {
        const res = await GET_MODEL_VALUE_QUERY(param);
        if (res && Number(res.errorcode) === 0 && res.result && res.result.length) {
          let pushType = [];
          res.result.forEach((item, index) => {
            pushType.push(item.push_type);
          });
          this.largeNumber = true;
          return pushType;
        }
      } catch (error) {
        _t.errorReport({name:`SubscribeTemplate.vue组件中方法modelFourSubGet错误。${error.name}`,message:`接口url：${_Global.api.modelValueSubQuery}，参数：${JSON.stringify(param)}。${error.message}`,stack:error.stack,category:'js'});
      }
    },
    async modelFiveSubGet() {
      const jtzzNum=2;
      const param = {
        type: 1, //订阅类型，1-股票池，2-股票，3-全部
        gpc: this.queryId,
        version: window.getParam('product') === 'jtzz' ? jtzzNum : 1,
      };
      const res = await GET_SUB(param);
      if (res && Number(res.code) === 0 && res.data && res.data[0]) {
        this.largeNumber = true;
        return res.data[0].push_type;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.unAuthorized {
  width: 100%;
  font-size: 0.5rem;
  color: #656565;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  .dia_bg {
    width: 90%;
    margin: 0 auto;
    height: 3.5rem;
    text-align: left;
    background-color: #fff;
    width: 100%;
    border-radius: 10px 10px 0 0;
    position: relative;
    padding-top: 4%;
    padding-bottom: 0.3rem;
    p {
      color: #999999;
      font-size: 0.26rem;
      padding-left: 3%;
    }
  }
}
.mask,
.maskUnbind {
  z-index: 9;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}
.check_box_wrapper {
  width: 94%;
  height: 0.48rem;
  margin-top: 0.2rem;
  padding-top: 0.2rem;
  line-height: 0.48rem;
  font-size: 0.32rem;
  color: #323232;
  margin-left: 0.2rem;
  border-top: 0.01rem solid #d4dde4;
  box-shadow: inset 0 0 0 0 #ebebeb;
}

.is_select_input {
  float: right;
  margin-top: 0.1rem;
}
.label_wrapper {
  display: flex;
  font-size: 0.24rem;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-right: 0.24rem;
}
.correct {
  display: inline-block;
  width: 0.18rem;
  height: 0.02rem;
  background-color: #e93030;
  line-height: 0;
  font-size: 0.32rem;
  vertical-align: middle;
  -webkit-transform: rotate(45deg);
}

.correct:after {
  content: '';
  display: block;
  width: 0.36rem;
  height: 0.02rem;
  background-color: #e93030;
  -webkit-transform: rotate(-90deg) translateY(-50%) translateX(50%);
}

[theme-mode='black'] .unAuthorized {
  width: 100%;
  font-size: 0.5rem;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  .dia_bg {
    width: 90%;
    margin: 0 auto;
    height: 3.5rem;
    text-align: left;
    background-color: #121212;
    width: 100%;
    border-radius: 10px 10px 0 0;
    position: relative;
    padding-top: 4%;
    padding-bottom: 0.3rem;
    p {
      width: 94%;
      color: #a9a9a9;
      font-size: 0.24rem;
      padding-left: 3%;
    }
  }
}
[theme-mode='black'] .check_box_wrapper {
  width: 94%;
  height: 0.48rem;
  margin-top: 0.2rem;
  padding-top: 0.2rem;
  line-height: 0.48rem;
  font-size: 0.32rem;
  color: #d2d2d3;
  margin-left: 0.2rem;
  border-top: 0.01rem solid #222222;
  box-shadow: inset 0 0 0 0 #222222;
}

[theme-mode='black'] .correct {
  display: inline-block;
  width: 0.18rem;
  height: 0.02rem;
  background-color: #fd4332;
  line-height: 0;
  font-size: 0.32rem;
  vertical-align: middle;
  -webkit-transform: rotate(45deg);
}

[theme-mode='black'] .correct:after {
  content: '';
  display: block;
  width: 0.36rem;
  height: 0.02rem;
  background-color: #fd4332;
  -webkit-transform: rotate(-90deg) translateY(-50%) translateX(50%);
}
</style>
